<template>
	<div v-if="orderDetail != null">
		<div class='order-place' v-for="(item,index) in orderDetail.goods_list" :key="index">
			<img class='goods-thumb' :src='item.goods_image' />
			<div class='goods-title-content'>
				<span class='goods-title'>{{item.goods_name}}</span>
				<span class='goods-class'>{{item.goods_spec}}</span>
			</div>
			<div class='flex-grow'></div>
			<div class='goods-prices' decode="true">¥{{item.goods_price}}x {{item.goods_num}}</div>
		</div>
		<!--月定制 月份的列表  -->
		<!--<div class='order-place-colum' v-if="">
			<div class='month-item'>
				<span class='sub-month-info'>2017年9月</span>
				<span class='sub-month-info'>￥2018 x 5</span>
			</div>
		</div>-->
	</div>
</template>

<script>
	import {mapGetters,mapState} from 'vuex';
	export default{
		data(){
			return{
				
			}
		},
		computed:{
            ...mapState(['orderDetail'])
        }
	}
</script>

<style lang="scss" scoped>
	.order-place {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40px 0;
		border-bottom: 1px solid #dcdcdc;
		.goods-thumb {
			flex-shrink: 0;
			width: 120px;
			height: 100px;
			border-radius: 10px;
			margin-right: 20px;
		}
		.goods-title-content {
			width: 380px;
			padding-right: 20px;
			.goods-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
				width: 100%;
				height: 40px;
				margin-bottom: 20px;
				color: #67666b;
				font-size: 28px;
				line-height: 40px;
			}
			.goods-class {
				display: block;
				height: 40px;
				color: #9b9b9b;
				font-size: 28px;
				line-height: 40px;
			}
		}
		.flex-grow {
			height: 1px;
			flex-grow: 2;
		}
		.goods-prices {
			flex-shrink: 0;
			font-size: 30px;
			color: #67666b;
		}
	}
</style>